<template>
    <view class="main-container">
        <view class="main-body-container">
            <letter-page v-show="currentIndex === 0"></letter-page>
            <sms-page v-show="currentIndex === 1"></sms-page>
            <history-page v-show="currentIndex === 2"></history-page>
            <my-page v-show="currentIndex === 3"></my-page>
        </view>
        <view class="main-footer-container">
            <view class="tab-container" v-for="(tab, index) in tabs" @click="tabChanged(index)">
                <img :src="tab.selected ? tab.selectedImage : tab.normalImage" />
                <text :class="tab.selected ? 'text-selected' : 'text-normal'">{{ tab.text }}</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import letter_normal from '@/static/img/main/letter_normal.png';
import letter_selected from '@/static/img/main/letter_selected.png';
import sms_normal from '@/static/img/main/sms_normal.png';
import sms_selected from '@/static/img/main/sms_selected.png';
import history_normal from '@/static/img/main/history_normal.png';
import history_selected from '@/static/img/main/history_selected.png';
import my_normal from '@/static/img/main/my_normal.png';
import my_selected from '@/static/img/main/my_selected.png';
import letterPage from '@/pages/main/letter/index.vue';
import smsPage from '@/pages/main/sms/index.vue';
import historyPage from '@/pages/main/history/index.vue';
import myPage from '@/pages/main/my/index.vue';
const currentIndex = ref(0);
const tabs = ref([
    {
        normalIcon: '',
        selectedIcon: '',
        text: '书信',
        selected: true,
        normalImage: letter_normal,
        selectedImage: letter_selected,
        path: '/pages/main/letter/index'
    },
    {
        normalIcon: '',
        selectedIcon: '',
        text: '短信',
        selected: false,
        normalImage: sms_normal,
        selectedImage: sms_selected,
        path: '/pages/main/sms/index'
    },
    {
        normalIcon: '',
        selectedIcon: '',
        text: '历史',
        selected: false,
        normalImage: history_normal,
        selectedImage: history_selected,
        path: '/pages/main/history/index'
    },
    {
        normalIcon: '',
        selectedIcon: '',
        text: '我的',
        selected: false,
        normalImage: my_normal,
        selectedImage: my_selected,
        path: '/pages/main/my/index'
    }
]);
watch(currentIndex, (newValue) => {
    tabs.value.forEach((item, index) => {
        item.selected = newValue == index;
        if (item.selected) {
            uni.switchTab({
                url: item.path
            });
        }
    });
});
function tabChanged(index) {
    currentIndex.value = index;
}
onLoad((options) => {
    currentIndex.value = options.index || 0;
});
onMounted(() => {
    // console.log('page.route', getCurrentPages()[0].);
});
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';
.main-container {
    @extend .column-container-layout;
    .main-body-container {
        @extend .column-container-layout;
        flex: 1;
    }
    .main-footer-container {
        @extend .row-layout;
        height: 60px;
        border-top: 1px solid #dbdbdb;
        background-color: white;
        .tab-container {
            @extend .column-container-layout;
            flex: 1;
            img {
                width: 28px;
                height: 28px;
            }
            text {
                font-size: 11px;
            }
            .text-normal {
                color: #acacac;
            }
            .text-selected {
                color: #e25111;
            }
        }
    }
}
</style>
